<script setup>
import { ref } from 'vue'
import CopyToClipboard from '../components/CopyToClipboard/CopyToClipboard.vue'

// 动态内容
const dynamicContent = ref('这是一个动态内容示例')

// 动态生成内容函数
const generateContent = () => {
  return `随机数: ${Math.random()}`
}
</script>

<template>
  <div class="copy-demo">
    <!-- 基础文本复制示例 -->
    <section class="demo-block">
      <h3>基础文本复制</h3>
      <div class="content-box">
        <p>静态文本内容</p>
        <CopyToClipboard
            content="这是要复制的静态文本"
            buttonText="复制文本"
            successText="复制成功！"
        />
      </div>
    </section>

    <!-- 动态内容复制示例 -->
    <section class="demo-block">
      <h3>动态内容复制</h3>
      <div class="content-box">
        <input v-model="dynamicContent" type="text">
        <CopyToClipboard
            :content="dynamicContent"
            buttonText="复制输入内容"
            successText="已复制！"
            :buttonClass="['custom-btn', 'primary']"
        />
      </div>
    </section>

    <!-- 函数生成内容复制示例 -->
    <section class="demo-block">
      <h3>函数生成内容复制</h3>
      <div class="content-box">
        <p>点击按钮复制随机数</p>
        <CopyToClipboard
            :contentSource="generateContent"
            buttonText="复制随机数"
            successText="复制完成"
            :buttonClass="{
            'custom-btn': true,
            'secondary': true
          }"
        />
      </div>
    </section>
  </div>
</template>

<style scoped>
.copy-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-block {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
}

h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}

.content-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0;
}

input {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 200px;
}

.custom-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.primary {
  background-color: #409eff;
  color: white;
}

.primary:hover {
  background-color: #66b1ff;
}

.secondary {
  background-color: #67c23a;
  color: white;
}

.secondary:hover {
  background-color: #85ce61;
}
</style>